import QtQuick 2.0

DrakSquare {
    property variant easings: ["Linear", "InQuad", "OutQuad", "InOutQuad",
        "InCubic", "InSine", "InCirc", "InElastic", "InBack", "InBounce"]

    id: root;
    width: 600;
    height: 340;

    Grid {
        id: container;
        anchors.top: parent.top;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.margins: 16;
        height: 200;
        columns: 5;
        spacing: 6;

        Repeater {
            model: easings;
            ClickableImageV3 {
                framed: true;
                text: modelData;
                source: "rec/rec/Curves/" + modelData + ".png";

                onClicked: {
                    anim.easing.type = modelData;
                    anim.restart();
                }
            }
        }
    }

    GreenSquare {
        id: square;
        x: 40; y: 260;
    }

    NumberAnimation {
        id: anim;
        target: square;
        property: "x";
        from: 40; to: root.width - 40- square.width;
        duration: 2000;
    }

    NumberAnimation on opacity {
        from: 0.6;
        to: 1;
        duration: 400;
        easing.type: Easing.InQuad;
    }
}
